<template>
  <div>
    <div class="moudel">
      <div class="title">价格设置</div>
      <div class="left moudel">
        <div class="online">在线价格咨询</div>
        <div class="ipt f-row ai-c">
          <el-input
            placeholder="请填写价格"
            :disabled="type == 'see'"
            v-model="consultPrice"
          ></el-input>
          <span class="yuan">元</span>
        </div>
        <div class="online">预约挂号价格</div>
        <div class="ipt f-row ai-c">
          <el-input
            placeholder="请填写价格"
            :disabled="type == 'see'"
            v-model="registerPrice"
          ></el-input>
          <span class="yuan">元</span>
        </div>
      </div>
    </div>
    <div class="moudel mt-2 mb-2" v-for="(i, k) in expertZb" :key="k">
      <div class="title">坐班选择</div>
      <div class="boxcurrnt moudel bs-bb pt-re">
        <img
          class="del_iocn cp"
          v-if="type == 'emit'"
          @click="del(k)"
          src="../../assets/images/others/deled.png"
          alt=""
        />
        <div class="title_">选择院校和场地</div>
        <el-cascader
          :disabled="type == 'see' || i.title ? true : false"
          v-model="i.cascaderList"
          :props="defaultParams"
          :show-all-levels="false"
          :options="options"
          ref="cascader"
          :key="k"
          @change="handleChange(k)"
        ></el-cascader>
        <div class="title_">选择坐班时段</div>
        <tableAssembly :data="i.list" :columns="columnsList"></tableAssembly>
      </div>
    </div>
    <div class="add" v-if="type == 'emit'" @click="addZbFn">+添加坐班</div>
    <div
      class="btn-deep ml-2"
      v-if="type == 'see'"
      @click="(type = 'emit'), (addZbObj = {})"
    >
      编辑
    </div>
    <div class="f-row ai-c" v-else>
      <div class="btn-light" @click="type = 'see'">取消</div>
      <div class="btn-deep" @click="save">提交审核</div>
    </div>
    <!--   <div class="btn-deep" @click="submitForReview = true">提交审核</div> -->
    <!-- 挂号个数弹框 -->
    <el-dialog
      :visible.sync="registrationNumDialog"
      width="30%"
      :before-close="registrationNumDialogClose"
    >
      <div class="writeNum">填写挂号个数</div>
      <el-input v-model="ghNum" type="number"></el-input>
      <span slot="footer" class="dialog-footer">
        <div class="btn-light" @click="registrationNumDialog = false">
          取 消
        </div>
        <div class="btn-deep" type="primary" @click="isOk">确 定</div>
      </span>
    </el-dialog>
    <!-- 提交审核弹框 -->
    <el-dialog
      :visible.sync="submitForReview"
      width="30%"
      :before-close="submitForReviewClose"
    >
      <div class="dialog">
        <div>
          <img src="../../assets/images/others/success.png" alt="" />
          <span>提交审核成功</span>
        </div>
        <div>
          您的资料已提交成功，预计1-2个工作日审核成功，您
          可以到工作台查看审核进度
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import tableAssembly from "@/components/common/tabbleAssembly.vue";
import {
  study_field,
  rooms_id,
  expert_infoAll,
  expert_zb,
  expert_saveZb,
} from "@/request/api";
export default {
  components: {
    tableAssembly,
  },
  data() {
    return {
      currentTab: null, //当前点击的表格信息
      ghNum: null, //挂号数量
      type: "see",
      expertZb: null, //专家当前坐班
      registerPrice: "", //预约挂号价格
      consultPrice: "", //在线咨询价格
      tabbleData: [], //坐班数据
      currentId: null, //当前诊断场地id
      addZbObj: {}, //当前选择场地的索引和id
      defaultParams: {
        label: "siteName",
        value: "id",
        children: "siteRooms",
      },

      submitForReview: false, //提交审核
      registrationNumDialog: false, //挂号次数
      options: [],
      value: "",
      // 表单数据
      dataList: [],
      // 表头数据
      columnsList: [
        {
          prop: "timeSlot",
          label: "时间/星期",
          width: "120",
        },
        {
          prop: "times",
          label: "周一",
          render: (m) => {
            return (
              <div>
                {m.times[0].expertId == null ? (
                  <el-tag
                    type="danger"
                    class="cp"
                    onClick={this.tapTab.bind(this, m.times[0].count, m, 0)}
                  >
                    {m.times[0].count}
                  </el-tag>
                ) : this.expertId == m.times[0].expertId ? (
                  <el-tag
                    type="danger"
                    class="cp"
                    onClick={this.tapTab.bind(this, m.times[0].count, m, 0)}
                  >
                    {m.times[0].count}
                  </el-tag>
                ) : (
                  <el-tag type="info">占用</el-tag>
                )}
              </div>
            );
          },
        },
        {
          prop: "times",
          label: "周二",
          render: (m) => {
            return (
              <div>
                {m.times[1].expertId === null ? (
                  <el-tag
                    type="danger"
                    class="cp"
                    onClick={this.tapTab.bind(this, m.times[1].count, m, 1)}
                  >
                    {m.times[1].count}
                  </el-tag>
                ) : this.expertId == m.times[1].expertId ? (
                  <el-tag
                    type="danger"
                    class="cp"
                    onClick={this.tapTab.bind(this, m.times[1].count, m, 1)}
                  >
                    {m.times[1].count}
                  </el-tag>
                ) : (
                  <el-tag type="info">占用</el-tag>
                )}
              </div>
            );
          },
        },
        {
          prop: "wednesday",
          label: "周三",
          render: (m) => {
            return (
              <div>
                {m.times[2].expertId == null ? (
                  <el-tag
                    type="danger"
                    class="cp"
                    onClick={this.tapTab.bind(this, m.times[2].count, m, 2)}
                  >
                    {m.times[2].count}
                  </el-tag>
                ) : this.expertId == m.times[2].expertId ? (
                  <el-tag
                    type="danger"
                    class="cp"
                    onClick={this.tapTab.bind(this, m.times[2].count, m, 2)}
                  >
                    {m.times[2].count}
                  </el-tag>
                ) : (
                  <el-tag type="info">占用</el-tag>
                )}
              </div>
            );
          },
        },
        {
          prop: "thursday",
          label: "周四",
          render: (m) => {
            return (
              <div>
                {m.times[3].expertId == null? (
                  <el-tag
                    type="danger"
                    class="cp"
                    onClick={this.tapTab.bind(this, m.times[3].count, m, 3)}
                  >
                    {m.times[3].count}
                  </el-tag>
                ) : this.expertId == m.times[3].expertId ? (
                  <el-tag
                    type="danger"
                    class="cp"
                    onClick={this.tapTab.bind(this, m.times[3].count, m, 3)}
                  >
                    {m.times[3].count}
                  </el-tag>
                ) : (
                  <el-tag type="info">占用</el-tag>
                )}
              </div>
            );
          },
        },
        {
          prop: "friday",
          label: "周五",
          render: (m) => {
            return (
              <div>
                {m.times[4].expertId == null ? (
                  <el-tag
                    type="danger"
                    class="cp"
                    onClick={this.tapTab.bind(this, m.times[4].count, m, 4)}
                  >
                    {m.times[4].count}
                  </el-tag>
                ) : this.expertId == m.times[4].expertId ? (
                  <el-tag
                    type="danger"
                    class="cp"
                    onClick={this.tapTab.bind(this, m.times[4].count, m, 4)}
                  >
                    {m.times[4].count}
                  </el-tag>
                ) : (
                  <el-tag type="info">占用</el-tag>
                )}
              </div>
            );
          },
        },
        {
          prop: "saturday",
          label: "周六",
          render: (m) => {
            return (
              <div>
                {m.times[5].expertId == null ? (
                  <el-tag
                    type="danger"
                    class="cp"
                    onClick={this.tapTab.bind(this, m.times[5].count, m, 5)}
                  >
                    {m.times[5].count}
                  </el-tag>
                ) : this.expertId == m.times[5].expertId ? (
                  <el-tag
                    type="danger"
                    class="cp"
                    onClick={this.tapTab.bind(this, m.times[5].count, m, 5)}
                  >
                    {m.times[5].count}
                  </el-tag>
                ) : (
                  <el-tag type="info">占用</el-tag>
                )}
              </div>
            );
          },
        },
        {
          prop: "sunday",
          label: "周日",
          render: (m) => {
            return (
              <div>
                {m.times[6].expertId == null ? (
                  <el-tag
                    type="danger"
                    class="cp"
                    onClick={this.tapTab.bind(this, m.times[6].count, m, 6)}
                  >
                    {m.times[6].count}
                  </el-tag>
                ) : this.expertId == m.times[6].expertId ? (
                  <el-tag
                    type="danger"
                    class="cp"
                    onClick={this.tapTab.bind(this, m.times[6].count, m, 6)}
                  >
                    {m.times[6].count}
                  </el-tag>
                ) : (
                  <el-tag type="info">占用</el-tag>
                )}
              </div>
            );
          },
        },
      ],
      expertId: null,
    };
  },
  watch: {
    addZbObj(nVal, oVal) {
      if (nVal.id) {
        this.query_times();
      }
    },
  },
  async created() {
    this.expertId = await this.$store.state.expert_info.expertId;
    await this.getdata();
    await this.expertInfoFn();
    await this.expertZbFn();
  },
  methods: {
    //提交审核
    save() {
      let obj = {
        list: [],
      };
      obj.consultPrice = this.consultPrice;
      obj.registerPrice = this.registerPrice;
      for (let i = 0; i < this.expertZb.length; i++) {
        if (
          !this.expertZb[i].cascaderList ||
          this.expertZb[i].cascaderList == []
        ) {
          this.$message.error("请完善表格或者删除不需要的表格！");
          return;
        }
        let list = this.expertZb[i].list;
        console.log(list, 998);
        // list.forEach(item=>{
        //   item.times.forEach(item2=>{
        //     item2.
        //   })
        // })
        let params = {
          siteRoomId: this.expertZb[i].cascaderList[1],
          // times: list,
          times: this.expertZb[i].list,
        };
        obj.list.push(params);
      }
      expert_saveZb(obj).then((res) => {
        if (res.code == 200) {
         /*  this.$message({
            message: "保存成功",
            type: "success",
          }); */
          this.submitForReview=true
          this.type = 'see'
          this.getdata();
        } else {
          this.$message.error("保存失败，请重试！");
        }
      });
    },
    //删除
    del(k) {
      this.expertZb.splice(k, 1);
    },
    //坐班弹框确定
    isOk() {
      let currentTab = this.currentTab;
      let list = this.expertZb[currentTab.listKey].list;
      for (let i = 0; i < list.length; i++) {
        if (list[i].timeSlot == currentTab.timeSlot) {
          list[i].times[currentTab.week].count = this.ghNum;
          this.registrationNumDialog = false;
          // list[i].times[currentTab.week].expertId = this.expertId
          return;
        }
      }

      // try {
      //   this.expertZb[currentTab.listKey].list.forEach((item) => {
      //     if (item.timeSlot == currentTab.timeSlot) {
      //       item.times[currentTab.week].count = this.ghNum;
      // item.times[currentTab.week].expertId = this.expertId;
      //       this.registrationNumDialog = false;
      //       throw Error();
      //     }
      //   });
      // } catch (err) {
      //   console.log(err);
      // }
    },
    //点击坐班表格
    tapTab() {
      if (this.type == "see") {
        return;
      }else if(arguments[1].times[arguments[2]].status==3){
        this.$message.error('该时段被禁用！')
        return
      }

      let siteRoomId = arguments[1].siteRoomId;
      let k_ = null;
      this.expertZb.forEach((i, k) => {
        if (i.cascaderList[1] == siteRoomId) {
          k_ = k;
        }
      });
      this.currentTab = {
        listKey: k_, //当前表格在整个列表的索引
        week: arguments[2], //周几
        count: arguments[0], //当前表格数量
        timeSlot: arguments[1].timeSlot, //当前表格的时间段
      };
      this.ghNum = arguments[0]; //弹框回显当前数量
      this.registrationNumDialog = true;
    },
    //继续添加坐班
    addZbFn() {
      this.expertZb.push({
        list: [],
      });
    },
    //专家当前坐班
    expertZbFn() {
      expert_zb(this.expertId).then((res) => {
        if (res.code == 200) {
          this.expertZb = res.result;
          this.expertZb.forEach((item) => {
            item.cascaderList = [item.siteId, item.siteRoomId];
          });
        }
      });
    },
    //专家信息
    expertInfoFn() {
      expert_infoAll(this.expertId).then((res) => {
        if (res.code == 200) {
          this.registerPrice = res.result.registerPrice;
          this.consultPrice = res.result.consultPrice;
        } else {
          this.$message.error("获取专家信息失败！");
        }
      });
    },
    registrationNumDialogClose() {
      this.registrationNumDialog = false;
    },
    submitForReviewClose() {
      this.submitForReview = false;
    },
    //初始化数据 所有诊室
    getdata() {
      study_field()
        .then((res) => {
          for (let i = 0; i < res.result.length; i++) {
            let siteRooms = res.result[i]?.siteRooms;
            if (siteRooms && siteRooms.length > 0) {
              for (let j = 0; j < siteRooms.length; j++) {
                for (const key in siteRooms[j]) {
                  if (key == "name") {
                    siteRooms[j]["siteName"] = siteRooms[j][key]; //在对象中添加了变量name值键名,并把当前key值赋值给了obj[name]
                    delete siteRooms[j][key]; //删除当前键名为stockDetail的属性
                    break;
                  }
                }
              }
            }
          }
          this.options = res.result;
        })
        .catch((err) => {
          console.log(err, "查询所有对象包含场地失败");
        });
    },

    //选择场地
    async handleChange(key) {
      let node = await this.$refs.cascader[key].getCheckedNodes();
      for (let i = 0; i < this.expertZb.length; i++) {
        if (i != key) {
          if (
            this.expertZb[i].cascaderList[1] ==
            this.expertZb[key].cascaderList[1]
          ) {
            this.expertZb[key].cascaderList = [];
            this.expertZb[key].list = [];
            this.$message.error("不能添加重复的场地！");
            return;
          }
        }
      }
      let obj = {
        id: node[0].data.id,
        key: key,
      };
      this.addZbObj = obj;
    },
    //查询坐班时段
    query_times() {
      rooms_id(this.addZbObj.id)
        .then((res) => {
          if (res.code == 200) {
            if (res.result.list.length > 0) {
              this.expertZb[this.addZbObj.key].list = res.result.list;
            }
          } else {
            this.$message.error("查询表格数据失败");
          }
        })
        .catch((err) => {
          console.log(err, "查询坐班时间段错误");
        });
    },
  },
};
</script>
<style lang="less" scoped>
.del_iocn {
  width: 2rem;
  height: 2rem;
  position: absolute;
  top: 4rem;
  right: 4rem;
  z-index: 99;
}
/deep/.el-cascader {
  .el-input {
    width: 37.5rem;
  }
}
.dialog {
  img {
    widows: 1.75rem;
    height: 1.75rem;
    margin-right: 0.625rem;
  }
}
.dialog div:nth-child(1) {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.25rem;
  color: #333333;
  line-height: 2.5rem;
}
.dialog div:nth-child(2) {
  color: #b2b2b2;
  line-height: 2.5rem;
  text-align: center;
}
.writeNum {
  font-size: 1.25rem;
  line-height: 2.5rem;
}
/deep/ .has-gutter th {
  padding: 0.75rem 0 !important;
  background: #d7d7d7;

  color: #333333;
}
.add {
  width: 12.5rem;
  height: 2rem;
  background: #ffffff;
  border: 0.0625rem solid #d7d7d7;
  font-size: 0.875rem;
  text-align: center;
  color: #1f1f1f;
  line-height: 2rem;
  margin: auto;
  cursor: pointer;
}
/deep/.el-table {
  width: calc(100% - 5rem);
}
/deep/ .el-table_3_column_18 el-table__cell {
  background: #ffccce;
  border: 0.0625rem solid #f4333c;
}
.boxcurrnt {
  width: 80rem;
  background: #f8f8f8;
  padding: 1.625rem 2.0625rem;
  /*   display: grid;
  grid-row-gap: 1.25rem; */
}
.title {
  color: #1f1f1f;
  font-weight: 600;
  border-left: 0.3125rem solid var(--darkColor);
  padding-left: 0.625rem;
}
.ipt {
  width: 25rem;
}
.yuan {
  color: #1f1f1f;
  margin-left: 1.25rem;
}
.moudel {
  display: grid;
  grid-row-gap: 1.125rem;
}
.left {
  padding-left: 0.9375rem;
  color: #1f1f1f;
}
</style>